import React from "react"
import styled from "styled-components"
import { Collapse } from "antd"

const StyledContainer = styled.div``

export const WarningAudits: React.FC<{ info: any }> = ({ info }) => {
  function renderHeader(item: any) {
    const color = ["#F4664A", "#FAAD14", "#30BF78"]
    let colorIndex = 1
    if (item.score <= 0.33) {
      colorIndex = 0
    }

    return (
      <span style={{ color: color[colorIndex] }}>
        {item.title} - <span>{item.score}</span>
      </span>
    )
  }

  function renderContent() {
    if (!info) return null
    return (
      <Collapse>
        {Object.keys(info)
          .filter((itemKey) => {
            const item = info[itemKey]
            if (typeof item.score !== "number") return false
            if (item.score < 0.7) return true
          })
          .map((itemKey) => {
            const it = info[itemKey]
            return (
              <Collapse.Panel key={it.id} header={renderHeader(it)}>
                {it.description}
              </Collapse.Panel>
            )
          })}
      </Collapse>
    )
  }

  return (
    <StyledContainer className="mb-6 p-5 border bg-white rounded-md">
      <h3 className="text-lg mb-5">修改建议</h3>
      <div className="content">{renderContent()}</div>
    </StyledContainer>
  )
}
